<template>
  <view class='content'>
    <view class="user">
      <view class="back">
        <u-navbar title="" leftIcon="" bgColor="#ea6d17" placeholder></u-navbar>
        <view class="userInfo">
          <view class="avatar">
            <u-avatar text="张" fontSize="24" randomBgColor size="80" :border="false"></u-avatar>
            <text v-if="!form.isAuthentication">去认证</text>
          </view>
          <view class="info">
            <view class="nickName">张涛</view>
            <view class="post">
              <text>前端开发</text>
              <text class="duration">已入职6个月</text>
            </view>
          </view>
        </view>
        <view class="circle"></view>
      </view>
      <view class="performance">
        <view class="type" v-for="(item, index) in performanceList" :key="index">
          <!-- <up-image :src="item.image" width="58rpx" height="58rpx"></up-image> -->
          <view class="num">
            {{ item.num }}
            <text>单</text>
          </view>
          <view class="title">{{ item.name }}</view>
          <view class="circle"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      performanceList: [
        {
          name: '当前项目',
          num: 2
        },
        {
          name: '完结项目',
          num: 2
        },
        {
          name: '工分数',
          num: 200
        },
      ],
      form: {
        // 是否已完成认证
        isAuthentication: true
      }
    }
  },
  methods: {
  },
}
</script>

<style scoped lang='less'>
.user {


  .back {
    position: relative;
    background: #ea6d17;
    height: 600rpx;
    padding: 44rpx 66rpx;

    .userInfo {
      position: absolute;
      bottom: 44rpx;
      display: flex;
      align-items: center;

      .avatar {
        position: relative;

        text {
          width: 110rpx;
          height: 30rpx;
          background: #FFFFFF;
          border-radius: 15rpx;
          text-align: center;
          line-height: 30rpx;
          position: absolute;
          bottom: 0;
          font-size: 22rpx;
          font-weight: 400;
          color: #7D7D7D;
          left: 50%;
          transform: translateX(-50%);
        }

      }

      .info {
        margin-left: 23rpx;

        .nickName {
          font-size: 36rpx;
          font-weight: 400;
          color: #FFFFFF;
          margin-bottom: 10rpx;
        }

        .post {
          margin-top: 10rpx;
          font-size: 24rpx;
          font-weight: 500;
          color: #FFFFFF;

          text {
            margin-right: 20rpx;

          }
        }

        .duration {
          font-weight: 400;

        }
      }

    }

    .circle {
      position: absolute;
      top: 200rpx;
      right: 30rpx;
      border-radius: 0 0 210rpx 210rpx;
      z-index: 999;
      width: 420rpx;
      height: 210rpx;
      background: #F99958;
    }
  }

  .performance {
    display: flex;
    justify-content: space-between;
    padding: 24rpx 30rpx 36rpx 30rpx;

    .type {
      position: relative;
      width: 160rpx;
      // height: 240rpx;
      padding: 28rpx 26rpx 33rpx 26rpx;
      background: #FFFFFF;
      box-shadow: 0rpx 6rpx 6rpx 0rpx rgba(0, 0, 0, 0.03);
      border-radius: 22rpx;

      .num {
        margin-top: 10rpx;
        margin-bottom: 6rpx;
        padding-left: 10rpx;
        font-size: 56rpx;
        font-weight: 400;
        color: #ED6F1A;

        text {
          font-size: 28rpx;
          font-weight: 400;
          color: #666666;
        }
      }

      .title {
        font-size: 28rpx;
        font-weight: 400;
        color: #666666;
      }

      .circle {
        position: absolute;
        top: -0;
        right: 0;
        opacity: 0.11;
        width: 100rpx;
        height: 50rpx;
        border-radius: 0 0 50rpx 50rpx;
        background-color: #ED6F1A;
      }
    }
  }
}
</style>
